import {Component, Input, Output, EventEmitter} from '@angular/core';
import {WeUIFile} from "angular4-weui";

@Component({
    selector: 'app-weui-gallery',
    templateUrl: 'weUIGalleryComponent.html',
    styleUrls: ['weUIGalleryComponent.css']
})
export class WeUIGalleryComponent {

    /**
     * 背景图片，如：url(./images/pic_160.png)
     */
    @Input() image: WeUIFile;

    /**
     * 是否显示删除按钮
     */
    @Input() canDelete = true;

    /**
     * 删除事件
     */
    @Output() delete = new EventEmitter<WeUIFile>();

    /**
     * 已显示否
     */
    public shown = false; // (显示时，先_show，然后才shown)
    public _show = false; // 解决transition动画与display冲突的问题

    constructor() {

    }

    /**
     * @internal
     */
    deleteImage(event: Event): void {
        this.delete.emit(this.image);
        event.preventDefault();
    }

    /**
     * 显示图片
     */
    show(): void {
        this._show = true;
        setTimeout(() => { // 解决transition动画与display冲突的问题
            this.shown = true;
        }, 10);
    }

    /**
     * 隐藏图片
     */
    hide(): void {
        this.shown = false;
        setTimeout(() => { // 解决transition动画与display冲突的问题
            this._show = false;
        }, 200);
    }

}
